<template>
  <div :class="right" @click="dropDown(true)">
    <span>{{title}}</span>
    <svg width="10px" height="5px" viewBox="0,0 10,5" :class="svg_class">
      <polyline points="0,0 10,0 5,5" />
    </svg>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['right', 'title', 'mark', 'show'],
  //right:标识是否是最右边的,是则不显示边框
  //title:文字内容
  //mark: 控制的下拉列表名
  //show:当前显示的下拉列表名,没有则为mull
  data() {
    return {
      svg_class: null,
      open: true
    }
  },
  methods: {
    dropDown(code) {
      if (this.open) {
        if (this.show) {
          //如果当前已经和又其他下拉选项打开,就等其选项收起后再转(列表下拉动画和箭头旋转动画同步)
          setTimeout(() => {
            this.svg_class = 'Arrow'
          }, 300)
        } else {
          this.svg_class = 'Arrow'
        }
      } else {
        this.svg_class = 'Arrow2'
      }
      this.open = !this.open
      if (code) this.$emit('Appear', this.mark)
    },
    off() {
      this.svg_class = 'Arrow2'
      this.open = true
    }
  }
}
</script>
<style  scoped>
div {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px #f5f5f5 solid;
  background-color: white;
}
div span {
  font-size: 0.7rem;
}
svg {
  margin-left: 0.5rem;
}
.Arrow {
  animation: rotate 0.3s linear both;
}
.Arrow2 {
  animation: rotate2 0.3s linear;
}
@keyframes rotate {
  0% {
  }
  100% {
    transform: rotate(180deg);
  }
}
@keyframes rotate2 {
  0% {
    transform: rotate(180deg);
  }
  100% {
  }
}
.none {
  border: none;
}
</style>